<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .banner {
            height: 285px;
            background: url("./images/banner_01_blur.png") center center /6000px;
        }

        .banner .area {
            display: flex;
            height: 285px;
            background-color: blue;
            position: relative;
        }

        .banner .area .area-left {
            position: relative;
            width: 730px;
        }

        .banner .area .area-left .list {
            display: flex;
            overflow: hidden;
        }

        .banner .area .area-left .list li {
            flex-shrink: 0;
        }

        .banner .area .area-left .item {
            display: block;
        }

        .banner .area .area-left .item img {
            width: 100%;
            height: 285px;
        }

        .banner .area .area-left .dot-list {
            position: absolute;
            display: flex;
            bottom: 5px;
            left: 0;
            right: 0;
            justify-content: center;
        }
        .banner .area .area-left .dot-list a{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url("./images/banner.png") 3px -343px;
        }

        .banner .area .area-left .dot-list .dot-item.activate,
        .banner .area .area-left .dot-list .dot-item:hover{
            background-position:  -16px -343px;
        }

        .banner .area .area-right .download-top{
            position: relative;
            width: 254px;
            height: 285px;
            background: url("./images/img.png") 0 0;
        }

        .banner .area .area-right{
            position: relative;
        }

        .banner .area .area-right .download-bottom{
            position: absolute;
            font-size: 12px;
            color: #8d8d8d;
            line-height: 17px;
            bottom: 2px;
            left: 10px;
        }

        .banner .area .area-right .download-top .download{
            display: block;
            position: absolute;
            width: 215px;
            height: 56px;
            margin: 186px 0 0 19px;
            text-indent: -9999px;
        }
        

        .banner .area .area-right .download-top .download:hover{
            background: url("./images/img.png") 0 -290px;
        }

        .banner .area .arrow{
            position: absolute;
            display: block;
            width: 37px;
            height: 63px;
            top: 0;
            bottom: 0;
            margin: auto 0;
            background-image: url("./images/img_1.png");
        }

        .banner .area .arrow.left{
            left: -68px;
            background-position: 0 -360px;
        }

        .banner .area .arrow.left:hover{
            background-position: 0 -430px;
        }

        .banner .area .arrow.right:hover{
            background-position: 0 -578px;
        }

        .banner .area .arrow.right{
            right: -68px;
            background-position: 0 -508px;
        }
    </style>
</head>
<body>

<div class="banner">
    <div class="area wrapper_03">
        <div class="area-left">
            <ul class = "list">
                <li>
                    <a class="item" href="#"><img src="./images/banner_01.png" alt=""></a>
                </li>
                <li>
                    <a class="item" href="#"><img src="./images/banner_01.png" alt=""></a>
                </li>
                <li>
                    <a class="item" href="#"><img src="./images/banner_01.png" alt=""></a>
                </li>
            </ul>
            <ul class="dot-list">
                <li><a href="#" class="dot-item "></a></li>
                <li><a href="#" class="dot-item activate"></a></li>
                <li><a href="#" class="dot-item "></a></li>
                <li><a href="#" class="dot-item "></a></li>
                <li><a href="#" class="dot-item "></a></li>
                <li><a href="#" class="dot-item "></a></li>
                <li><a href="#" class="dot-item "></a></li>
                <li><a href="#" class="dot-item "></a></li>
                <li><a href="#" class="dot-item "></a></li>
                <li><a href="#" class="dot-item "></a></li>
            </ul>
        </div>
        <div class="area-right">
            <div class="download-top">
                <a href="#" class="download">下载客户端</a>
            </div>
            <div class="download-bottom">
                <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
            </div>
        </div>
        <a href="#" class="arrow left"></a>
        <a href="#" class="arrow right"></a>
    </div>
</div>

</body>
</html>